<template>
  <div>
    <el-form :model="form" label-width="100px" ref="form" class="form">
      <el-form-item :label="$t('file')" prop="file">
        <!-- <el-upload
          ref="upload"
          :action="action"
          :file-list="fileList"
          :auto-upload="false"
          accept=".tar.gz"
          :on-remove="handleFileChange"
          :on-change="handleFileChange"
        >
          <el-button slot="trigger" size="small" class="kylin-button"
            >选取文件</el-button
          >
          <div slot="tip" class="el-upload__tip">只能上传tar.gz文件</div>
        </el-upload> -->
        <div id="uploader" class="wu-example">
          <div id="fileList" class="uploader-list">
            <h4 v-if="fileName" class="info">{{ fileName }}</h4>
          </div>
          <div class="btns">
            <div
              v-if="!fileName"
              class="kylin-button file-selector"
              @click="handleSelect"
            >
              选择文件
            </div>
            <div style="display: none" id="picker"></div>
          </div>
        </div>
        <el-progress
          v-if="!percentage == 0"
          :text-inside="true"
          :stroke-width="26"
          :percentage="percentage"
        ></el-progress>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button
        id="uploadBtn"
        class="kylin-button"
        @click="handleOk"
        v-loading="loading"
        >确 定</el-button
      >
    </div>
  </div>
</template>

<script>
import $ from "jquery";
import WebUploader from "webuploader";
import { getToken } from "@/utils/auth";
import { getCombine } from "@/api/patch";
export default {
  data() {
    return {
      fileName: "",
      percentage: 0,
      title: "",
      action: "#",
      fileList: [],
      form: {},
      GUID: "",
      uploader: {},
      loading: "",
    };
  },
  methods: {
    handleSelect() {
      $("#picker").find("input").click();
    },
    handleCancel() {
      this.loading = false;
      this.uploader.stop(true);
      this.resetForm();
      this.$emit("click");
    },
    handleOk() {
      this.loading = true;
      this.uploader.upload();
    },
    resetForm() {
      this.$refs.form.resetFields();
      this.percentage = 0;
      this.fileList = [];
    },
  },
  mounted() {
    let _this = this;
    const GUID = WebUploader.Base.guid();
    this.GUID = GUID;
    this.uploader = WebUploader.create({
      pick: { id: "#picker", multiple: false },
      formData: {
        guid: GUID,
      },
      server: `/spUpgrade/save`,
      resize: false,
      chunked: true, //开始分片上传
      chunkSize: 5000 * 1024 * 100, //每一片的大小
    });
    this.uploader.on("uploadBeforeSend", function (obj, data, headers) {
      $.extend(headers, {
        authToken: getToken(),
        guid: GUID,
        fileName: data.name,
      });
    });
    this.uploader.on("fileQueued", function (file) {
      _this.fileName = file.name;
    });
    this.uploader.on("uploadProgress", function (file, percentage) {
      _this.percentage =
        percentage < 0.01 ? 0 : Math.round(percentage * 100) - 1; //根据上传进度改变进度条宽度
    });

    this.uploader.on("uploadSuccess", function (file) {
      let data = { guid: "", fileName: "" };
      data.fileName = file.name;
      data.guid = GUID;
      getCombine(data).then((res) => {
        _this.$message({
          type: "success",
          message: "已上传成功，请稍候",
        });
        _this.percentage = 100;
        _this.handleCancel();
        _this.$router.push({
          name: "log_detail",
          params: { id: res.data.data.id },
        });
      });
    });

    this.uploader.on("uploadError", function (file) {
      _this.$message({
        type: "error",
        message: "上传出现错误，请重试",
      });
      _this.handleCancel();
    });
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.form {
  width: 80%;
  margin: 0 auto;
}
.webuploader-container {
  position: relative;
}
.webuploader-element-invisible {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}
.file-selector {
  cursor: pointer;
  background: #00b7ee;
  height: 36px;
  width: 88px;
  color: #fff;
  text-align: center;
  border-radius: 3px;
  overflow: hidden;
}
.webuploader-pick-hover {
  background: #00a2d4;
}

.webuploader-pick-disable {
  opacity: 0.6;
  pointer-events: none;
}
</style>